<template>      
    <div class="person">
       <h2>一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
       <button @click="changePrice">修改汽车的价格</button>
       <button @click="changeBrand">修改汽车的品牌</button>
       <button @click="changeCar">修改汽车</button>
       <hr>
       <h2>当前求和为：{{ sum }}</h2>
       <button @click="changeSum">点我sum+1</button>
    </div>
    
</template>

<script lang="ts"  setup >
    import { reactive, ref } from 'vue';

    let car = ref({brand:'奔驰',price:100})
    let sum = ref(0)

    function changePrice (){
      car.value.price+=10
    }

    function changeBrand(){
      car.value.brand='宝马'
    }

    function changeCar(){
      //car = {brand:"雅迪",price:1}//失去响应式,这么写页面不更新 （reactive）
      //Object.assign(car,{brand:"雅迪",price:1});//这样可以（reactive)
      car.value={brand:"雅迪",price:1}
    }

    function changeSum()
    {
        sum.value+=1
    }
</script>